<template>
  <a_page>
    <a工具栏 :list="list" :详情="详情"></a工具栏>
    <el-table ref="multipleTable" border tooltip-effect="dark" :data="单项组" row-key="id" @selection-change="list.选中变了"
      @sort-change="list.sortChange" :default-sort="a.默认排序" style="height: calc(100% - 60px);">
      <el-table-column type="selection" width="40" />
      <el-table-column align="left" label="id" width="80">
        <template #default="scope">
          <el-button type="primary" link icon="link" @click="详情.初始化(scope.row)">{{ scope.row.id
          }}</el-button>
        </template>
      </el-table-column>
      <!-- 主要列👇 -->
      <el-table-column align="left" label="名称" prop="名称" width="120" />
      <el-table-column align="left" label="类别" prop="类别" width="120">
        <template #default="scope">
          <!-- <span>{{ filterDataSource(dataSource.类别, scope.row.类别) }}</span> -->
          <span>{{ list.取字段显示值(scope.row, "类别id") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片组" prop="图片组" width="200">
        <template #default="scope">
          <div class="multiple-img-box">
            <el-image preview-teleported v-for="(item, index) in scope.row.图片组" :key="index"
              style="width: 80px; height: 80px" :src="getUrl(item)" fit="cover" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="关键词" prop="关键词" width="200">
        <template #default="scope">
          <ArrayCtrl v-model="scope.row.关键词" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="价格" prop="价格" width="120" />
      <el-table-column label="详情" prop="详情" width="200">
        <template #default="scope">
          见详情页面……
        </template>
      </el-table-column>
      <el-table-column align="left" label="skus" prop="skus" width="120" />
      <el-table-column label="可选配置" prop="可选配置" width="200">
        <template #default="scope">
          <ArrayCtrl v-model="scope.row.可选配置" />
        </template>
      </el-table-column>

      <!-- 末尾列👇 -->
      <el-table-column align="left" sortable label="修改时间" prop="UpdatedAt" width="180">
        <template #default="scope">{{ formatDate(scope.row.UpdatedAt) }}</template>
      </el-table-column>
      <el-table-column align="left" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="danger" link icon="delete" @click="list.删(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="gva-pagination">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="req.page" :page-size="req.pageSize"
        :page-sizes="a.可选页面容量" :total="a.total" @current-change="list.跳转页面" @size-change="list.改单页条数" />
    </div>
    <a详情 ref="详情" :list="list"></a详情>
  </a_page>
</template>

<script setup>

import { ref, reactive, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
import ArrayCtrl from '@/components/arrayCtrl/arrayCtrl.vue'

// import use工具栏 from '@/hooks/工具栏';
// const { 工具栏ref, 工具栏class, 顶部间距style } = use工具栏()

import a工具栏 from '@/components/a工具栏.vue'
import use插组件 from "@/hooks/use插组件"
const 插组件 = use插组件()

import use from '@/hooks/uselist';
const list = use({}, 插组件)
const { a, req } = list

const yy = ref()
const searchInfo = ref({})
const 详情 = ref()
// import use详情_抽屉式 from '@/hooks/use详情_抽屉式';
// const 详情 = use详情_抽屉式({ 查多个: list.查多个 })
// const { 弹窗否, 单项, 初始化, formRef, rule } = 详情

import a详情 from './详情_抽屉式.vue'
// const 弹窗否 = ref(false)

import { getUrl } from '@/utils/image'
// 类别选择组件
// 全量引入格式化工具 请按需保留

import SelectImage from '@/components/selectImage/selectImage.vue'
import { getDictFunc, formatDate, formatBoolean, filterDict, filterDataSource, returnArrImg, onDownloadFile } from '@/utils/format'

// const 候选值集 = ref({})

// const getDataSourceFunc = async () => {
//   const res = await list.取候选值集()
//   console.log(`取候选值集 res 👉`, res)
//   if (res.code === 0) {
//     候选值集.value = res.data
//   }
// }
// getDataSourceFunc()

// 查多个()
</script>

<style lang="scss" scoped></style>
